﻿/* Pane panel */
#infoPane
{
    position:       absolute;
    /*background:     #4d4d70;*/
    display:        none;
    opacity:        0.9;
    z-index:		998;
    top:			45px;
    left:			0px;
    height:			100%;
    min-height:		68px;
    padding:		0px;
    text-align:     center;
    color:          white;
} 

#loading
{
    position:       absolute;
    background:     #4d4d70;
    display:        none;
    opacity:        0.80;
    z-index:		998;
    top:			45px;
    left:			0px;
    height:			34px;
    min-height:		34px;
    padding:		0px;
    text-align:     center;
    color:          white;
} 

    
#errorPane
{
    position:       absolute;
    background:     #000000;
    display:        none;
    opacity:        0.80;
    z-index:		999;
    top:			45px;
    left:			0px;
    height:			100%;
    width:          100%;
    text-align:     center;
    color:          white;    
    margin-bottom:  45px;
}

/* Pane panel close button */
.close
{
    position:       absolute;
    top:            10px;
    right:          10px;
    cursor:         pointer;
}
        
/* Pane panel text*/
.paneText
{
    opacity:        1.0;
    color:          white;
    font-weight:    bold;
}

.paneTextPlus
{
    opacity:        1.0;
    color:          red;
    font-size:      13px;
    font-weight:    bold;
}

.b_paneTextPlus
{
    color:          red;
    font-size:      11px;
    font-weight:    bold;
    cursor: pointer
}

.busButton 
{
    left: 56px;
    right: auto;
}

.trainButton 
{
    left: 106px;
    right: auto;
}

.mapButton 
{
    left: 156px;
    right: auto;
}

.tripButton
{
    left: 206px;
    right: auto;
}

.loginButton
{
    left: auto;
    right: 20px;
}

.trainDestination { display:block; overflow:hidden; text-overflow:ellipsis; font-weight: bold;}


ul.trainPrediction > li:first-child, ul.trainPrediction > li:last-child { background-color:#b72d31 !important; padding:2px 6px; }
ul.trainPrediction > li:first-child  { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; border-top-width:1px !important; text-align:right; vertical-align:middle; }
ul.trainPrediction > li:last-child { -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; border-bottom-width:1px !important; }
ul.trainPrediction > li { color:White; text-align:left; background-color:#fff; padding:3px 8px; height:auto !important; min-height:10px !important; border:1px solid #aaa; border-width:0 1px; }
ul.trainPrediction > li:nth-child(odd) { background-color:#eee; }


.t_destination { display:inline; overflow:hidden; text-overflow:ellipsis; }
.t_departure { padding-left:8px; padding-right:4px; text-decoration: none;}
.line_rd:before { content:url(icon-marble-red.gif); vertical-align:middle; padding-left:8px; padding-right:4px; }
.line_yl:before { content:url(icon-marble-yellow.gif); vertical-align:middle; padding-left:8px; padding-right:4px; }
.line_bl:before { content:url(icon-marble-blue.gif); vertical-align:middle; padding-left:8px; padding-right:4px; }
.line_or:before { content:url(icon-marble-orange.gif); vertical-align:middle; padding-left:8px; padding-right:4px; }
.line_gr:before { content:url(icon-marble-green.gif); vertical-align:middle; padding-left:8px; padding-right:4px; }

ul.busPrediction > li:first-child, ul.busPrediction > li:last-child { background-color:#4085bd !important; padding:2px 6px; }
ul.busPrediction > li:first-child  { -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; border-top-width:1px !important; text-align:right; vertical-align:middle; }
ul.busPrediction > li:last-child { -webkit-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; border-bottom-width:1px !important; }
ul.busPrediction > li { color:White; text-align:left; background-color:#fff; padding:3px 8px; height:auto !important; min-height:10px !important; border:1px solid #aaa; border-width:0 1px; }
ul.busPrediction > li:nth-child(odd) { background-color:#eee; }

/*
.stopName { display:block; overflow:hidden; text-overflow:ellipsis; font-weight: bold;}
.routeNum { font-size:12px; display:inline; overflow:hidden; text-overflow:ellipsis; }
.stopTime { font-size:10px; display:inline; overflow:hidden; text-overflow:ellipsis; }

.b_head { display:inline; overflow:hidden; text-overflow:ellipsis; }
.b_route { display:inline; overflow:hidden; text-overflow:ellipsis; }
.b_departure { padding-left:8px; padding-right:4px; }
.b_status_late { display:inline; overflow:hidden; text-overflow:ellipsis; }
.b_status_ontime { display:inline; overflow:hidden; text-overflow:ellipsis; }
.b_status_notontrack { display:inline; overflow:hidden; text-overflow:ellipsis; }
*/

.err_header { display:inline; overflow:hidden; text-overflow:ellipsis; }
.err_message { display:inline; overflow:hidden; text-overflow:ellipsis; }
.err_stackTrace {display: inline; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: normal; padding-right: 2px; padding-left: 2px;}

.error_field { color: Red; font-size: 14px; font-weight: bold; position: absolute; right: 10px; top: 12px; }

#lineInfo { background-color: Transparent; border: none; padding: 8px 0px 8px 0px; }


/* ------------------ Popup styles ----------------------- */

.popupWrapper{ /* The wrapper holds its insides together */	
	position: absolute; /* Absolute will make the tooltip float above other content in the page */
	/*top: 20px;*/
	/*display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
	color: #f9ffff;	
	font: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
}

.popupContent {
	padding: 8px 8px;
	background: url(../../../../images/popupContent.png) repeat-x top;
}

.popupGBorder { /* Top section of the tooltip */
    height: 6px;        
	background: #980e0a;
}

.popupVBorder { /* Top section of the tooltip */
    width: 6px;        
	background: #980e0a;
}

.popupArrow { /* Bottom Section of the tooltip */
    width: 35px;
	height: 20px;
	background: transparent url(../../../../images/popupArrow.png) no-repeat;
}

#infoPane a.popupButton
{	
    /* Sliding right image */
    background: transparent url('../../../../images/button_right.png') no-repeat scroll top right; 
	display: inline-block;	
	height: 25px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
	margin-right: 6px;
	padding-right: 8px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
	/* FONT PROPERTIES */
	text-decoration: none;
	color: #000000;
	font: Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align: center;		
}

#infoPane a.popupButton span {
	/* Background left image */ 
	background: transparent url('../../../../images/button_left.png') no-repeat; 
	display: block;
	line-height: 20px; /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
	padding: 3px 0 5px 8px;
	text-decoration: none;	
} 


#infoPane a.popupButton[selected], a.popupButton:active,a.popupButton span[selected],a.popupButton span:active
{
    color: #FFF;
}

.popupLabel
{
	font-size:10px;
}

.popupLabelBold
{		
	font-size:12px;
	font-weight:bold;		
}

.popupLabel text.red
{
	color: #990e0a;
}

.popupLabel text.green
{
	color: #1b7a25;
}

/* ------------------- Main Menu Styles ----------------------------------- */

.top { }
.top .header { width: 100%; height: 158px; }
.top .headerPicture { height: 158px; }

#mainMenu {padding: 0px;}

/* ------------------------------------------------------------------------ */
/*
.panel > ul > li.mainMenuListItem a
{	
	font-family: "Myriad Pro", Arial, Helvetica;
	font-size:16px;
	background-image: url(listArrowSel.png), url(selection.png) !important;
    background-color: #194fdb !important;
    background-repeat: no-repeat, repeat-x !important;	/* TG: !important */
    /*background-position: right center, left top !important;	/* TG: !important */
    /*color: #FFFFFF !important;	
}
*/

/*
body {
    font-family: Arial;
}

.panel > ul > li.transitItem a
{
	font-family: "Myriad Pro", Arial, Helvetica;
	font-size:16px;
}
*/

/* Page title */
.panel > h2
{
	display: block;
	text-align:center;
	color: #0c0c0c;	
	font-weight:bold;
	font-size:17px;
}

/* Page information */
.panel > h3
{
	text-align:left;
	color: #999999;
	font-size:15px;
	margin: 3px 0 3px 0px;
	text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
}

/* List title (before <ul>)*/
.panel > h4
{
	text-align:left;
	color: #0c0c0c;
	font-size:15px;
	margin: 3px 0px 3px 8px;
	text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
}

span.routeDir 
{			
	font-size: 12px;
	font-weight: normal; 
	padding-right: 2px; 
	padding-left: 2px;
}


span.redLabel
{
	color: #a11615;
}